<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>小米商城</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/fonts.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link rel="stylesheet" href="./css/swiper.min.css" />
    <script src="./js/swiper.min.js"></script>
    <script src="./js/index.js"></script>
    <style>
      .swiper-container {
        width: 1226px;
        height: 460px;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }
      .swiper-button-prev {
        left: 240px;
      }
    </style>
  </head>
  <body>
    <!-- 顶部栏 -->
    <div class="topBar">
      <div class="container">
        <div class="topBar_list">
          <a href="#">小米商城</a>
          <span>|</span>
          <a href="#">MIUI</a>
          <span>|</span>
          <a href="#">loT</a>
          <span>|</span>
          <a href="#">云服务</a>
          <span>|</span>
          <a href="#">金融</a>
          <span>|</span>
          <a href="#">有品</a>
          <span>|</span>
          <a href="#">小爱开放平台</a>
          <span>|</span>
          <a href="#">政企服务</a>
          <span>|</span>
          <a href="#">资质证照</a>
          <span>|</span>
        </div>
        <div class="shop">
          <a href="#">
            <i class="iconfont" style="font-size: 14px">&#xe61b;</i>
            购物车(0)
          </a>
        </div>
        <div class="login">
          <a href="#">登录</a>
          <span>|</span>
          <a href="#">注册</a>
          <span>|</span>
          <a href="#">消息通知</a>
        </div>
      </div>
    </div>
    <!-- 导航栏 -->
    <div class="header">
      <div class="container">
        <div class="site-logo">
          <a href="#">
            <img src="images/logo.png" />
          </a>
        </div>
        <div class="site-list">
          <ul class="clearfix">
            <li class="site-category">
              <a href="">
                <img src="images/mifen.gif" />
              </a>
              <!-- 侧边栏 -->
              <div class="category-list">
                <ul>
                  <li>
                    <a href="#">
                      手机 电话卡
                      <span class="iconfont">&#xe605;</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      电视 盒子
                      <span class="iconfont">&#xe605;</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      笔记本 平板
                      <span class="iconfont">&#xe605;</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      家电 插线板
                      <span class="iconfont">&#xe605;</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      出行 穿戴
                      <span class="iconfont">&#xe605;</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      智能 路由器
                      <span class="iconfont">&#xe605;</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      电源 配件
                      <span class="iconfont">&#xe605;</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      健康 儿童
                      <span class="iconfont">&#xe605;</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      耳机 音响
                      <span class="iconfont">&#xe605;</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      生活 箱包
                      <span class="iconfont">&#xe605;</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>
            <li>
              <a href="#">小米手机</a>
            </li>
            <li>
              <a href="#">红米</a>
            </li>
            <li>
              <a href="#">电视</a>
            </li>
            <li>
              <a href="#">笔记本</a>
            </li>
            <li>
              <a href="#">家电</a>
            </li>
            <li>
              <a href="#">新品</a>
            </li>
            <li>
              <a href="#">路由器</a>
            </li>
            <li>
              <a href="#">智能硬件</a>
            </li>
            <li>
              <a href="#">服务</a>
            </li>
            <li>
              <a href="#">社区</a>
            </li>
          </ul>
        </div>
        <div class="site-search">
          <form action="">
            <input type="text" name="shop" class="search-text" />
            <input
              type="submit"
              class="search-btn iconfont"
              value="&#xe60b;"
              style="font-size: 24px"
            />
            <div class="search-word">
              <a href="#">小米9</a>
              <a href="#">小米9 SE</a>
            </div>
          </form>
        </div>
      </div>
    </div>
    <!-- 主页内容 -->
    <div class="site-content">
      <div class="container">
        <!-- 轮播图 -->
        <div class="site-slider">
          <!-- <a href="#">
            <img src="images/lb1.jpg" />
          </a>
          <span class="next"></span>
          <span class="prev"></span>
          <div class="slider-item">
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
					</div> -->
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <a href="#">
                  <img src="images/lb1.webp" />
                </a>
              </div>
              <div class="swiper-slide">
                <a href="#">
                  <img src="images/lb2.webp" />
                </a>
              </div>
              <div class="swiper-slide">
                <a href="#">
                  <img src="images/lb3.webp" />
                </a>
              </div>
              <div class="swiper-slide">
                <a href="#">
                  <img src="images/lb4.webp" />
                </a>
              </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
            <!-- Add Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
          </div>
        </div>

        <!-- 向导 -->
        <div class="content-sub">
          <!-- 向导左 -->
          <div class="content-channel">
            <ul class="channel-list clearfix">
              <li>
                <a href="#">
                  <i class="iconfont">&#xe641;</i>
                  选购手机
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="iconfont">&#xe790;</i>
                  企业团购
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="iconfont">&#xe603;</i>
                  F码通道
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="iconfont">&#xe602;</i>
                  米粉卡
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="iconfont">&#xe60f;</i>
                  以旧换新
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="iconfont">&#xe601;</i>
                  话费充值
                </a>
              </li>
            </ul>
          </div>
          <!-- 向导右 -->
          <div class="content-list">
            <ul class="clearfix">
              <li>
                <a href="#">
                  <img src="images/s1.jpg" />
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="images/s2.jpg" />
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="images/s3.jpg" />
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="content-banner">
        <div class="container">
          <a href="#">
            <img src="images/banner.jpg" />
          </a>
        </div>
      </div>
    </div>
    <!-- 内容详情 -->
    <div class="content-desc">
      <div class="container">
        <!-- 标题 -->
        <div class="box-hd">
          <h2>手机</h2>
          <div class="more">
            <a href="#">
              查看全部
              <i class="iconfont">&#xe605;</i>
            </a>
          </div>
        </div>
        <!-- 内容 -->
        <div class="box-bd">
          <div class="row clearfix">
            <!-- 内容左边 -->
            <div class="row-l">
              <a href="#">
                <img src="images/iphone.jpg" />
              </a>
            </div>
            <!-- 内容右边 -->
            <div class="row-r">
              <ul>
                <li>
                  <!-- 图像 -->
                  <div class="figure">
                    <a href="#">
                      <img src="images/figure1.jpg" />
                    </a>
                  </div>
                  <!-- 标题 -->
                  <h3 class="title">
                    <a href="#"> 小米9 6GB+128GB </a>
                  </h3>
                  <p class="desc">骁龙855，索尼4800万超广角微距三摄</p>
                  <p class="price"><span class="num">2999</span>元</p>
                  <div class="flag flag-new">新品</div>
                </li>
                <li>
                  <!-- 图像 -->
                  <div class="figure">
                    <a href="#">
                      <img src="images/figure1.jpg" />
                    </a>
                  </div>
                  <!-- 标题 -->
                  <h3 class="title">
                    <a href="#"> 小米9 6GB+128GB </a>
                  </h3>
                  <p class="desc">骁龙855，索尼4800万超广角微距三摄</p>
                  <p class="price"><span class="num">2999</span>元</p>
                  <div class="flag flag-new">新品</div>
                </li>
                <li>
                  <!-- 图像 -->
                  <div class="figure">
                    <a href="#">
                      <img src="images/figure1.jpg" />
                    </a>
                  </div>
                  <!-- 标题 -->
                  <h3 class="title">
                    <a href="#"> 小米9 6GB+128GB </a>
                  </h3>
                  <p class="desc">骁龙855，索尼4800万超广角微距三摄</p>
                  <p class="price"><span class="num">2999</span>元</p>
                  <div class="flag flag-new">新品</div>
                </li>
                <li>
                  <!-- 图像 -->
                  <div class="figure">
                    <a href="#">
                      <img src="images/figure1.jpg" />
                    </a>
                  </div>
                  <!-- 标题 -->
                  <h3 class="title">
                    <a href="#"> 小米9 6GB+128GB </a>
                  </h3>
                  <p class="desc">骁龙855，索尼4800万超广角微距三摄</p>
                  <p class="price"><span class="num">2999</span>元</p>
                  <div class="flag flag-new">新品</div>
                </li>
                <li>
                  <!-- 图像 -->
                  <div class="figure">
                    <a href="#">
                      <img src="images/figure1.jpg" />
                    </a>
                  </div>
                  <!-- 标题 -->
                  <h3 class="title">
                    <a href="#"> 小米9 6GB+128GB </a>
                  </h3>
                  <p class="desc">骁龙855，索尼4800万超广角微距三摄</p>
                  <p class="price"><span class="num">2999</span>元</p>
                  <div class="flag flag-new">新品</div>
                </li>
                <li>
                  <!-- 图像 -->
                  <div class="figure">
                    <a href="#">
                      <img src="images/figure1.jpg" />
                    </a>
                  </div>
                  <!-- 标题 -->
                  <h3 class="title">
                    <a href="#"> 小米9 6GB+128GB </a>
                  </h3>
                  <p class="desc">骁龙855，索尼4800万超广角微距三摄</p>
                  <p class="price"><span class="num">2999</span>元</p>
                  <div class="flag flag-new">新品</div>
                </li>
                <li>
                  <!-- 图像 -->
                  <div class="figure">
                    <a href="#">
                      <img src="images/figure1.jpg" />
                    </a>
                  </div>
                  <!-- 标题 -->
                  <h3 class="title">
                    <a href="#"> 小米9 6GB+128GB </a>
                  </h3>
                  <p class="desc">骁龙855，索尼4800万超广角微距三摄</p>
                  <p class="price"><span class="num">2999</span>元</p>
                  <div class="flag flag-new">新品</div>
                </li>
                <li>
                  <!-- 图像 -->
                  <div class="figure">
                    <a href="#">
                      <img src="images/figure1.jpg" />
                    </a>
                  </div>
                  <!-- 标题 -->
                  <h3 class="title">
                    <a href="#"> 小米9 6GB+128GB </a>
                  </h3>
                  <p class="desc">骁龙855，索尼4800万超广角微距三摄</p>
                  <p class="price"><span class="num">2999</span>元</p>
                  <div class="flag flag-new">新品</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 脚部 -->
    <div class="footer">
      <div class="container">
        <div class="footer-service">
          <ul class="clearfix">
            <li class="first">
              <a href="#">
                <i class="iconfont">&#xe629;</i>
                预约维修服务
              </a>
            </li>
            <li>
              <a href="#">
                <i class="iconfont">&#xe629;</i>
                预约维修服务
              </a>
            </li>
            <li>
              <a href="#">
                <i class="iconfont">&#xe629;</i>
                预约维修服务
              </a>
            </li>
            <li>
              <a href="#">
                <i class="iconfont">&#xe629;</i>
                预约维修服务
              </a>
            </li>
            <li>
              <a href="#">
                <i class="iconfont">&#xe629;</i>
                预约维修服务
              </a>
            </li>
          </ul>
        </div>
        <div class="footer-links clearfix">
          <dl class="col-links">
            <dt>帮助中心</dt>
            <dd>账户管理</dd>
            <dd>购物指南</dd>
            <dd>订单操作</dd>
          </dl>
          <dl class="col-links">
            <dt>帮助中心</dt>
            <dd>账户管理</dd>
            <dd>购物指南</dd>
            <dd>订单操作</dd>
          </dl>
          <dl class="col-links">
            <dt>帮助中心</dt>
            <dd>账户管理</dd>
            <dd>购物指南</dd>
            <dd>订单操作</dd>
          </dl>
          <dl class="col-links">
            <dt>帮助中心</dt>
            <dd>账户管理</dd>
            <dd>购物指南</dd>
            <dd>订单操作</dd>
          </dl>
          <dl class="col-links">
            <dt>帮助中心</dt>
            <dd>账户管理</dd>
            <dd>购物指南</dd>
            <dd>订单操作</dd>
          </dl>
          <dl class="col-links">
            <dt>帮助中心</dt>
            <dd>账户管理</dd>
            <dd>购物指南</dd>
            <dd>订单操作</dd>
          </dl>
          <div class="col-contact">
            <p class="iphone">400-100-5678</p>
            <p>
              周一至周日 8:00-18:00
              <br />
              （仅收市话费）
            </p>
            <a href="#">
              <i class="iconfont">&#xe641;</i>
              联系客服
            </a>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
